<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <style type="text/css">
    *{margin: 0;padding: 0;}
    body{background: #000;}
    li{list-style: none;}
    .clear{clear: both;}
    div{width: 570px;margin: 200px auto;background: #fff;text-indent: 20px;}
    p{width: 570px;height: 30px;background: #6BA542;line-height: 30px;color: #FFFFFF;font-weight: bolder;}
    li{height: 40px;line-height: 40px;position: relative;border-top: 1px solid #6BA542;}
    .bt1{color:#6BA542;border: none;background: #fff;position: absolute;left: 250px;line-height: 38px;display: none;outline: none;}
    .bt2{color:#6BA542;border: none;background: #fff;position: absolute;left: 280px;line-height: 38px;display: none;outline: none;}
    input{border: 1px solid #6BA542;font-size: 18px;position: absolute;left: 20px;top: 5px;display: none;}
    span{float: left;margin: 0 20px}
    img{margin: 10px;text-indent: 0;}
  </style>
  <script type="text/javascript">
    window.onload = function (){
      var Div = document.getElementsByTagName('div')[0];
      var Ul = Div.getElementsByTagName('ul')[0];
      var Li = Ul.getElementsByTagName('li');
      for (var i = 0; i < Li.length; i++) {
        fun(Li[i]);
      };
      function fun(Li){
        var Span = Li.getElementsByTagName('span')[0];
        var Inp = Li.getElementsByTagName('input')[0];
        var Btn = Li.getElementsByTagName('button');
        var Img = Li.getElementsByTagName('img')[0];
        function fun1(){
          Inp.style.display = "inline-block";
          Btn[0].style.display = "inline-block";
          Btn[1].style.display = "inline-block";
          Img.style.display = "none";
        }
        Img.onclick = function(){
          fun1();
        }
        function fun2(){
          Inp.style.display = "none";
          Btn[0].style.display = "none";
          Btn[1].style.display = "none";
          Img.style.display = "inline-block";
        }
        Btn[0].onclick = function(){
          if(Inp.value == ""){
            alert("文本框不能为空")
            fun1();
          }else{
            fun2();
            Span.innerHTML = Inp.value;
          }
        }
        Btn[1].onclick = function(){
          fun2();
        }
      }
    }
  </script>
</head>
<body>
  <div>
    <p>分类名称</p>
    <ul>
      <li>
        <span>妙味远程课堂</span>
        <input type="text">
        <button class="bt1">保存</button>
        <button class="bt2">取消</button>
        <img src="images/21.png">
      </li>
      <li>
        <span>妙味远程课堂</span>
        <input type="text">
        <button class="bt1">保存</button>
        <button class="bt2">取消</button>
        <img src="images/21.png">
      </li>
      <li>
        <span>妙味远程课堂</span>
        <input type="text">
        <button class="bt1">保存</button>
        <button class="bt2">取消</button>
        <img src="images/21.png">
      </li>
      <li>
        <span>妙味远程课堂</span>
        <input type="text">
        <button class="bt1">保存</button>
        <button class="bt2">取消</button>
        <img src="images/21.png">
      </li>
      <li>
        <span>妙味远程课堂</span>
        <input type="text">
        <button class="bt1">保存</button>
        <button class="bt2">取消</button>
        <img src="images/21.png">
      </li>
    </ul>
  </div>
</body>
</html>